<template>
	<view>
		<view class="order_top" v-for="(item,index) in ulist" :key="index">
			<view class="" v-if="shopInfo.orderStatus == item.orderStatus">
				<view class="text" v-if="item.orderStatus == '已退款'">
					退款成功 ￥{{shopInfo.payAmount}}
				</view>
				<view class="text" v-else>
					{{item.orderStatus}}
				</view>
				<view class="c" v-if="item.orderStatus == '待支付'">
					请在 <text class="time">{{data.countdown}}</text> 内支付，过时将被取消
				</view>
				<view class="c">
					{{item.text}}
				</view>
			</view>
		</view>

		<view class="address">
			<image src="/static/dw.png" mode=""></image>
			<view class="address_r">
				<view class="t1">
					{{shopInfo.deliveryName}} {{shopInfo.deliveryPhone}}
				</view>
				<view class="t2">
					{{shopInfo.deliveryAddress}}
				</view>
			</view>
		</view>

		<view class="item_2 flex_jc_sb" v-if="shopInfo.productList">
			<view class="images flex">
				<image v-for="(ite,index) in shopInfo.productList.slice(0,3)" :key="index" :src="ite.productIcon"
					mode="aspectFit"></image>
			</view>
			<view class="righttext flex" @click="gocardetail()">
				共{{shopInfo.productList.length}}种 <uni-icons color="#D1D1D6" size="16" type="right"></uni-icons>
			</view>
		</view>
		<view class="shopinfo" v-if="shopInfo.orderStatus == '已退款' ">
			<view class="title">商品信息</view>
			<view class="item">
				<view class="text_l">
					退款原因
				</view>
				<view class="r1">
					{{shopInfo.refundApplyReason}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					订单合计
				</view>
				<view class="r1">
					￥{{shopInfo.payAmount}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					退款说明
				</view>
				<view class="r1">
					{{shopInfo.refundApplyDesc}}
				</view>
			</view>
			<view class="imglist">
				<image v-for="(item,index) in shopInfo.refundApplyImgs.split(',')" :key="index"
					@click="$previewImage(shopInfo.refundApplyImgs.split(','),index)" :src="item" mode=""></image>
			</view>
			<view class="x"></view>
			<view class="item">
				<view class="text_l">
					退款编号
				</view>
				<view class="r1">
					{{shopInfo.refundOutRefundNo}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					到账时间
				</view>
				<view class="r1">
					{{$formatDate(shopInfo.refundTime)}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					申请时间
				</view>
				<view class="r1">
					{{$formatDate(shopInfo.refundApplyTime)}}
				</view>
			</view>
		</view>
		<view class="shopinfo" v-else>
			<view class="title">商品信息</view>
			<view class="item">
				<view class="text_l">
					商品件数
				</view>
				<view class="r1">
					{{shopInfo.productCount}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					商品金额
				</view>
				<view class="r1">
					￥{{shopInfo.orderAmount}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					配送费
				</view>
				<view :class="shopInfo.payAmount>shopInfo.deliveryAmountRequire?'r3':'r1'">
					￥{{shopInfo.deliveryAmount}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					合计金额
				</view>
				<view class="hj">
					合计 <text>￥{{shopInfo.payAmount}}</text>
				</view>
			</view>
			<view class="x"></view>
			<view class="item">
				<view class="text_l">
					订单编号
				</view>
				<view class="r1">
					{{shopInfo.orderNumber}}
				</view>
			</view>
			<view class="item" v-if="shopInfo.orderStatus != '已取消'">
				<view class="text_l">
					订单类型
				</view>
				<view class="r1">
					{{shopInfo.orderType}}
				</view>
			</view>
			<view class="item" v-if="shopInfo.orderStatus != '已取消'">
				<view class="text_l">
					支付状态
				</view>
				<view class="" :class="shopInfo.payStatus=='0'?'r2':'r1'">
					{{shopInfo.payStatus=='0'?'未支付':'已支付'}}
				</view>
			</view>
			<view class="item" v-if="shopInfo.orderStatus != '已取消'">
				<view class="text_l">
					支付方式
				</view>
				<view class="r1" v-if="shopInfo.payStatus=='1'">
					{{shopInfo.payType}}
				</view>
			</view>
			<view class="item">
				<view class="text_l">
					下单时间
				</view>
				<view class="r1">
					{{$formatDate(shopInfo.createTime)}}
				</view>
			</view>
			<view class="item" v-if="shopInfo.payTime">
				<view class="text_l">
					支付时间
				</view>
				<view class="r1">
					{{$formatDate(shopInfo.payTime)}}
				</view>
			</view>
		</view>
	</view>
	<view class="zw" style="height: 166rpx;"></view>
	<view class="footer_kf"
		v-if="shopInfo.orderStatus == '待支付' || 
		shopInfo.orderStatus == '待备货' || 
		shopInfo.orderStatus == '备货中' || 
		shopInfo.orderStatus == '已送达' ">
		<view class="cont flex_jc_sb" v-if="shopInfo.orderStatus == '待支付'">
			<view class="zhif" @click="cancelOrder">
				取消订单
			</view>
			<view class="btnzhif flex_jc_cent" @click="handleCreateOrder">
				继续支付<view class="ic"><text class="">￥</text>{{shopInfo.payAmount}}</view>
			</view>
		</view>
		<view class="cont z_flex_bet" v-else>
			<view class="btnkf1" @click="$pageGo(`/pages/user/monthorder`)"
			 v-if="(shopInfo.orderType=='月结' && shopInfo.payStatus =='0') ">
				去支付
			</view>
			<view @click="handleCreateArrive" v-if="shopInfo.orderStatus == '已送达'" class="btnkf1">
				确认送达
			</view>
			<view v-if="shopInfo.orderStatus == '待备货'" class="btnkf"
				@click="cancelOrder">
				取消订单
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		ordersInfo,
		ordersCancel,
		ordersPay,
		createArrive
	} from '@/common/http.api.js'


	const ulist = ref([{
			orderStatus: '待支付',
			text: ''
		},
		{
			orderStatus: '待备货',
			text: '商家正在备货中，请您耐心等待'
		},
		{
			orderStatus: '备货中',
			text: '您的商品已开始配送，请您耐心等待'
		},
		{
			orderStatus: '已送达',
			text: '您的商品已成功送达，感谢您的惠顾'
		},
		{
			orderStatus: '已完成',
			text: '您的订单已完成，感谢您的惠顾'
		},
		{
			orderStatus: '已取消',
			text: '期待您的下次光临~'
		},
		{
			orderStatus: '已退款',
			text: '您的付款金额已原路退回'
		},
		{
			orderStatus: '退款中',
			text: '您的退款申请已提交，退款金额将在1-2个工作日原路退回'
		}
	])
	const data = reactive({
		countdown: "00分00秒",
		timer: null
	})
	onUnload(() => {
		if (data.timer) {
			clearInterval(data.timer);
			data.timer = null;
		}
	})
	const shopInfo = ref({})
	const id = ref(0)
	onLoad((option) => {
		id.value = option.id
	})
	onShow(() => {
		ordersInfo({
			id: id.value
		}).then(res => {
			shopInfo.value = res.data.orders
			startCountdown(res.data.second)
		})
	})
	// 确认订单
	function handleCreateArrive(){
		uni.showModal({
			title: '系统提示',
			content: '确定送达！',
			confirmText: '确定',
			confirmColor: '#FF7700',
			success: (res) => {
				if (res.confirm) {
					createArrive({
						id: shopInfo.value.id
					}).then(res => {
						if (res.code == 200) {
							ordersInfo({
								id: id.value
							}).then(res => {
								shopInfo.value = res.data.orders
							})
						}
					})
				} else if (res.cancel) {}
			}
		});
	}

	// 继续支付
	function handleCreateOrder() {
		ordersPay({
			id: shopInfo.value.id
		}).then(res => {
			console.log(res);
			if (res.code == 200) {
				uni.requestPayment({
					"provider": "wxpay", //固定值为"wxpay"
					appid: res.data.appId, // 应用ID（AppID）
					package: res.data.packageVal, // 固定值
					nonceStr: res.data.nonceStr, // 随机字符串
					timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
					signType: res.data.signType, // 签名，这里用的 MD5 签名
					paySign: res.data.paySign,
					success: function(res) {
						console.log(res);
						uni.showToast({
							icon: 'none',
							title: '支付成功'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/shopcart/orderyes?price=${shopInfo.value.payAmount}`
							})
						}, 100)
					},
					fail: function(err) {
						uni.showToast({
							icon: 'none',
							title: '支付取消'
						})
					}
				});
			}
		})
	}

	// 取消订单
	function cancelOrder() {
		if(shopInfo.value.payStatus == '0'){
			uni.showModal({
				title: '系统提示',
				content: '确定要取消当前订单吗！',
				confirmText: '确定',
				confirmColor: '#FF7700',
				success: (res) => {
					if (res.confirm) {
						ordersCancel({
							id: shopInfo.value.id
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '订单已取消',
									icon: 'none'
								})
								ordersInfo({
									id: id.value
								}).then(res => {
									shopInfo.value = res.data.orders
								})
							}
						})
					} else if (res.cancel) {}
				}
			});
		}
		if(shopInfo.value.payStatus == '1'){
			uni.navigateTo({
				url:`/pages/user/orderrefund?id=${id.value}`
			})
		}
	}

	function gocardetail() {
		uni.setStorageSync('Infolist', shopInfo.value.productList)
		uni.navigateTo({
			url: '/pages/shopcart/cardetail'
		})
	}

	function formatCountdown(seconds) {
		// 处理参数：确保是整数且非负数
		let totalSeconds = Math.max(0, parseInt(seconds, 10) || 0);
		const days = Math.floor(totalSeconds / 86400);
		totalSeconds %= 86400;
		// 计算时分秒
		const hours = Math.floor(totalSeconds / 3600)
		totalSeconds %= 3600;
		const minutes = Math.floor(totalSeconds / 60);
		const secs = totalSeconds % 60;
		// 补零函数
		const pad = (num) => num.toString().padStart(2, '0');
		return `${pad(minutes)}分${pad(secs)}秒`;
	}

	function startCountdown(date) {
		let seconds = date // 初始秒数
		data.timer = setInterval(() => {
			if (seconds <= 0) {
				clearInterval(data.timer);
				return;
			}
			seconds--;
			data.countdown = formatCountdown(seconds);
		}, 1000);
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.order_top {
		margin: 42rpx auto;
		text-align: center;

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
		}

		.c {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #8E8E8E;
			margin-top: 20rpx;

			.time {
				color: #FF7700;
			}
		}
	}

	.address {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 auto;
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.address_r {
			margin-left: 10rpx;
			flex: 1;
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.t2 {
				margin-top: 15rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
			}
		}
	}

	.item_2 {
		width: 710rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		box-sizing: border-box;

		.images {
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				border: 1rpx solid #DADADA;
				margin-right: 20rpx;
			}
		}

		.righttext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
		}
	}

	.shopinfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 30rpx 20rpx 1rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.x {
			width: 100%;
			height: 1px;
			background: #DADADA;
		}

		.imglist {
			display: flex;
			flex-direction: row-reverse;
			margin: 30rpx auto;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30rpx auto;

			.text_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
			}

			.r1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.r2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF7700;
			}

			.r3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				text-decoration: line-through;
			}

			.hj {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;

				text {
					font-weight: 800;
					font-size: 32rpx;
					color: #000000;
				}
			}
		}
	}

	.zw {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer_kf {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			padding: 10rpx 30rpx 10rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			height: 120rpx;
			color: #000000;

			.zhif {
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.btnzhif {
				width: 420rpx;
				height: 80rpx;
				background: #FF7700;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;

				.ic {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					margin-left: 10rpx;

					text {
						font-weight: 500;
						font-size: 28rpx;
					}
				}
			}


		}

		.z_flex_bet {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;

			.btnkf1 {
				width: 160rpx;
				height: 60rpx;
				background: #FF7700;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}

			.btnkf {
				width: 160rpx;
				height: 60rpx;
				background: #fff;
				border: 1px solid #DADADA;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 60rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}
	}
</style>